"use client";
import { type FC, useEffect } from "react";
import { Button, Image, Modal, Space, Table, Tag, message } from "antd";
import { isProd, options } from "../utils";
import { useStore } from "@/store";
import { getTemplates, tempDel, updateStatus } from "@/service";

interface IndexProps {}
const Index: FC<IndexProps> = () => {
  const { myResumes, setMyResumes } = useStore();
  const getList = async () => {
    getTemplates({ order_by: "id" }).then((res) => {
      if (res.code === 200) {
        setMyResumes(res.data);
      }
    });
  };
  useEffect(() => {
    getList();
  }, []);
  const getOptions = (v) => {
    const arr = [];
    options.forEach((item) => {
      if ((item.value & v) > 0) {
        arr.push(item.label);
      }
    });
    return arr.join(",");
  };
  if (!myResumes.length) return null;
  return !isProd ? (
    <>
      <Button
        style={{ margin: "20px" }}
        type="primary"
        onClick={() => {
          location.href = "/templateMake/edit";
        }}
      >
        新增
      </Button>
      <Table
        columns={[
          {
            title: "id",
            dataIndex: "id",
            align: "center",
          },
          {
            title: "标题",
            dataIndex: "title",
            align: "center",
          },
          {
            title: "描述",
            dataIndex: "description",
            align: "center",
          },
          {
            title: "模板名称",
            dataIndex: "templateName",
            align: "center",
          },
          {
            title: "分类",
            dataIndex: "classify",
            align: "center",
            render: (txt) => {
              return getOptions(txt);
            },
          },
          {
            title: "预览",
            dataIndex: "templateUrl",
            align: "center",
            render: (txt) => {
              return <Image src={txt} width={120} />;
            },
          },
          {
            title: "状态",
            dataIndex: "status",
            align: "center",
            render: (txt) => {
              return (
                <Tag color={txt ? "geekblue" : "orange"}>
                  {txt ? "已上架" : "已下架"}
                </Tag>
              );
            },
          },
          {
            title: "操作",
            align: "center",
            width: 240,
            render: (text, record) => (
              <Space>
                <a href={`/templateMake/edit?mid=${record.id}`}>编辑</a>
                {record.status === 0 ? (
                  <Button
                    type="link"
                    onClick={async () => {
                      const res = await updateStatus({
                        id: record.id,
                        status: 1,
                      });
                      if (res.code === 200) {
                        message.success("上架成功");
                        getList();
                      }
                    }}
                  >
                    上架
                  </Button>
                ) : (
                  <Button
                    danger
                    type="link"
                    onClick={async () => {
                      Modal.confirm({
                        title: "提示",
                        content: "确认下架?",
                        onOk: async () => {
                          const res = await updateStatus({
                            id: record.id,
                            status: 0,
                          });
                          if (res.code === 200) {
                            message.success("下架成功");
                            getList();
                          }
                        },
                      });
                    }}
                  >
                    下架
                  </Button>
                )}
                <a href={`/templateMake/edit?mid=${record.id}&copy=1`}>复制</a>
                <Button
                  danger
                  type="link"
                  onClick={async () => {
                    Modal.confirm({
                      title: "提示",
                      content: "确认删除?",
                      onOk: async () => {
                        const res = await tempDel({
                          id: record.id,
                          status: 0,
                        });
                        if (res.code === 200) {
                          message.success("删除成功");
                          getList();
                        }
                      },
                    });
                  }}
                >
                  删除
                </Button>
              </Space>
            ),
          },
        ]}
        dataSource={myResumes}
      />
    </>
  ) : null;
};

export default Index;
